<template>
  <a-form-model :model="form" ref="ruleForm" :rules="rules"  :label-col="labelCol" :wrapper-col="wrapperCol" >
    <div class="formBox">
      <div class="formRow"  v-for="(item,index) in formInfos" :key="index" :style="{width:item.width+'px'}"> 
        <a-form-model-item v-if="item.type=='input'" :label="item.label" :prop="item.name">
          <a-input v-model="form[item.name]"  :disabled ="item.isDisabled"  :placeholder="item.placeholder" />
        </a-form-model-item>
        <!-- <a-form-model-item v-if="item.type=='input'||item.type=='number'" :label="item.label" :prop="item.name">
          <a-input v-model="form[item.name]" :type="item.type=='number'?'number':'text'" :placeholder="item.placeholder" />
        </a-form-model-item> -->
        <a-form-model-item v-if="item.type=='textarea'" :label="item.label"   :prop="item.name">
            <a-input  v-model="form[item.name]" type="textarea" :placeholder="item.placeholder" />
        </a-form-model-item>
        <a-form-model-item  v-if="item.type=='select'" :label="item.label" :prop="item.name" >
          <a-select v-model="form[item.name]" showSearch allowClear  :placeholder="item.placeholder" :style="placeObj(item.name)"  @change="onSelectChange($event,item.link)" >
            <a-select-option value="" disabled selected hidden>{{item.placeholder}}</a-select-option> 
            <a-select-option v-for="(opt,ind) in item.options" :key="ind" :value="opt.id">
              {{opt.value}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item  v-if="loadGys(item.type)" :label="item.label"  :prop="item.name" >
          <a-select v-model="form[item.name]" showSearch allowClear   :disabled ="item.isDisabled" :style="placeObj(item.name)"  :placeholder="item.placeholder" @change="onGysSelectChange($event,item.name)" >
            <a-select-option value="" disabled selected hidden>{{item.placeholder}}</a-select-option> 
            <a-select-option v-for="(opt,inds) in gysOptions" :key="inds" :value="opt.pid">
              {{opt.value}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item  v-if="item.type=='dicselect'" :label="item.label"  :prop="item.name" >
          <DictSelect
            :dictCategory="item.dicName"
            :showCode="true"
            :placeholder="item.placeholder" 
            :name="item.name"
            @change="dicSelectChange($event,item.name)"
            :value="form[item.name]" ></DictSelect>
        </a-form-model-item>
        <a-form-model-item  v-if="item.type=='datatime'" :label="item.label" :prop="item.name">
          <a-date-picker 
            v-model="form[item.name]"
            @change="(date,dateString)=>dateOnChange(date,dateString,item.name)" />
        </a-form-model-item>
        <a-row v-if="item.type=='datatimeR'">
          <a-col :span="labelCol.span" ><div class="labels">{{item.label[0]}} <span style="margin: 0 8px 0 2px">:</span> </div></a-col>
          <a-col :span="wrapperCol.span">
           <a-row>
              <a-col :span="9">
              <a-form-model-item   :prop="item.name[0]" :label-col="{ span: 0}" :wrapper-col="{ span: 24}" >
                <a-date-picker 
                  size="small" v-model="form[item.name[0]]"
                  @change="(date,dateString)=>dateOnChange(date,dateString,item.name[0])" />
              </a-form-model-item>
            </a-col>
            <a-col :span="15">
              <a-form-model-item :label="item.label[1]"   :prop="item.name[1]" :label-col="{ span: 4}" :wrapper-col="{ span: 20}" >
                <a-date-picker :disabled ="isDisabled"
                  size="small" v-model="form[item.name[1]]"
                  @change="(date,dateString)=>dateOnChange(date,dateString,item.name[1])" />
                  <a-checkbox style="marginLeft:5px" @change="onChangeLong($event,item.name[1])">
                    长期
                  </a-checkbox>
              </a-form-model-item>
            </a-col>
           </a-row>
          </a-col>
        </a-row>
        <a-form-model-item  v-if="item.type=='datarange'" :label="item.label"  :prop="item.name"  >
          <a-range-picker
            v-model="form[item.name]"
            :ranges="{}"
            @change="(dates,dateStrings)=>datarangeOnChange(dates,dateStrings,item.name)"
          />
        </a-form-model-item>
        <a-form-model-item  v-if="item.type=='radio'" :label="item.label" :prop="item.name">
            <a-radio-group v-model="form[item.name]"  @change="onChange($event,item.name)">
                <a-radio-button v-for="(opt,ind) in item.options" :key="ind" :value="opt.id">
                    {{opt.value}}
                </a-radio-button>
            </a-radio-group> 
        </a-form-model-item>
        <a-form-model-item  v-if="item.type=='uploadimg'" :label="item.label"  :prop="item.name" >
          <ImgUpload  
            v-model="form[item.name]"
            @change="imgUploaded($event,item.name)"> </ImgUpload>
        </a-form-model-item>
        <!-- <div class="btnFixed" v-if="item.type=='botton'" >
          <a-button class="btn" type="primary"  @click="submitForm('ruleForm')">
            提交
          </a-button>
          <a-button class="btn" type="primary"  @click="resetForm('ruleForm')">
            重置
          </a-button>
        </div> -->
      </div> 
    </div>
    <div class="formBtn">
        <a-button class="btn" type="primary"  @click="submitForm('ruleForm')">
          提交
        </a-button>
        <a-button class="btn" type="primary"  @click="resetForm('ruleForm')">
          重置
        </a-button>
    </div>
  </a-form-model>
</template>

<script>
import DictSelect from '@/views/sys/modules/DictSelect'
import ImgUpload from '@/views/sys/modules/upload/ImgUpload'
import moment from 'moment'
// import {getSupplierList} from '@/views/app/biz/supplier/supplier'
// import { getRegisLicenseByPid} from '@/views/app/web/license_s/addRegisLicense/addRegisLicense'
export default {
  components:{
    DictSelect,
    ImgUpload
  },
  props:{
    formInfos:{
      type:Array,
    },
    formDatas:{
      type:Object
    },
    rules:{
      type:Object
    }
  },
  data(){
    return{  //:awrapperCol="awrapperCol" 
      labelCol: {  span:8 },
      wrapperCol:{ span:12},
      alabelCol:{ span:4},
      awrapperCol:{span:16},
      form: JSON.parse(JSON.stringify(this.formDatas)),
      forms:{},
      isDisabled:false,
      before100years:null,
      resetobj:JSON.parse(JSON.stringify(this.formDatas)),
      gysOptions:[],
      isloadGys:false,
      isloadZch:false
    }
  },
  computed:{
    loadGys(){ //判断是否加载供应商
      return type=>{
        if(type=='gysselect'){
          this.isloadGys=true
          return 1
        }else if(type=='zchselect'){
          this.isloadZch=true
          return 1
        }else{
          return 0
        }
      }
    },
    placeObj(){
      return name=>{
        if(this.form[name]==''){
          return {color:'#bbb'}
        }
      }
    }
  },
  watch:{
      formDatas:{//深度监听，可监听到对象、数组的变化
         handler(val, oldVal){
             this.form=JSON.parse(JSON.stringify(val))
             this.resetobj=JSON.parse(JSON.stringify(val))
             console.log("监听formDatas",val, oldVal);
         },
         deep:true //true 深度监听
     },

  },
  mounted(){
    if(this.isloadGys){
      this.supplierOption()
    }else if(this.isloadZch){
      this.zchOption()
    }
    
  },
  methods:{
    //
    async zchOption(){ 
      const res=await getRegisLicenseByPid()
      console.log(res);
      if (res && res.code && res.code === 'C1' && res.data) {
        let opt=[]
        for (const i in res.data) {
          opt.push({
            key:res.data[i].pid,
            value: res.data[i].zhengZhaohm,
          })
        }
        this.gysOptions=opt
        console.log(this.gysOptions);
      }
    },
    async supplierOption(){
      const res=await getSupplierList()
      console.log(res);
      if (res && res.code && res.code === 'C1' && res.data) {
        let opt=[]
        for (const i in res.data) {
          opt.push({
            id: res.data[i].gongYingsdm,
            value: res.data[i].gongYingsmc,
            pid:res.data[i].pid
          })
        }
        this.gysOptions=opt
        console.log(this.gysOptions);
      }
    },
    onGysSelectChange(val,name){ //点击选择列表时
      console.log(val);

      if(this.isloadGys){
        if(val){
          let obj=this.gysOptions.find(item=>{
            return item.pid == val
          })
          this.form.suoShupdm=obj.id //点击供应商时，将供应商代码对应的供应商代码赋值给this.form.suoShupdm
          this.form.suoShupPid=obj.pid
          this.form.suoShupmc=obj.value
        }else{
          this.form.suoShupPid=''
          this.form.suoShupmc=''
        }
      }else if(this.isloadZch){
        this.form[name].val
      }
      
    },
    dicSelectChange(val,name){
      this.form[name]=val
      console.log('字典select',val);
    },
    dateOnChange(date,dateString,name) {
      // this.form[name] = dateString
      this.forms[name] = dateString
      console.log(this.forms[name]);
    },
    datarangeOnChange(dates,dateStrings,name){
      //  this.form[name] = dateStrings
      this.forms[name] = dateStrings
    },
    onChangeLong(e,name){
      console.log(e.target.checked);
      let isChecked=e.target.checked
      if(isChecked){
        this.isDisabled=true;
        this.form[name]=moment().add(100, 'Y');
        this.forms[name] = this.form[name].format('YYYY-MM-DD');
      }else{
        this.isDisabled=false;
        this.form[name]=null; 
      }
      
    },
    onSelectChange(val,link){
      if(link=='1'){//通过val查询二级select
        let link2Item=this.formInfos.find(item=>{//查询第一个二级select,如需查询多个或三级select,在此修改
          return item.link=='2'
        })
        if(link2Item){
          this.form[link2Item.name]=undefined
          link2Item.options=[{id:'0',value:'所有'},{id:'1',value:'A市'},{id:'2',value:'B市'}]
          console.log(link2Item);
        }
        
      }
    },
    onChange(e,name){//切换时如果表单内容发生变化，则在调用该组件时在onChangeType中重新传入表单信息和数据
        console.log(name);
        this.forms={}
        
        this.$emit("onChangeType",name,this.form[name])
        
    },
    imgUploaded(imgurl,name){
      this.form.zhengZhaotpurl=imgurl
      this.form.zhengZhaoxsurl=imgurl
      console.log(imgurl);
    },
    submitForm(formName) {
      console.log(this.form);
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let submitdata=JSON.parse(JSON.stringify(this.form))
          for (let key in submitdata) {
            for (let keys in this.forms) {
              if (key==keys) {
                submitdata[key]=this.forms[keys]
              }
            }
          }
          console.log('查询中',submitdata);
          this.$emit('onSubmit',submitdata)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      
    },
    resetForm(formName) {
      this.forms={}
      // this.$refs[formName].resetFields();
      this.form= JSON.parse(JSON.stringify(this.resetobj))
      console.log("重置表单后",this.form);
      this.$emit('onFind',this.form)
    },
  }
}
</script>

<style scoped>
.formBox{
  padding-left: 5px;
  height:55vh;
  overflow-y: scroll;
}
.formBtn{
  height: 7vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.formRow{
  min-height: 50px;
  /* border: 1px solid #000; */
  
}
.ant-form-item {
  margin:0;
  /* border: 1px solid #e02; */
}
.btn{
  margin-left: 20px;
}
.labels{
  width: 100%;
  line-height: 40px;
  text-align: right;
}
.btnFixed{
  width: 100%;
  line-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}


</style>

//用法:formInfos的name和formDatas的属性一定要按照顺序一一对应
// <search-layout :formInfos="formInfos" :formDatas="formDatas"></search-layout>
// formInfos:[
// {label:'平台订单号1',name:'oid',type:'input',placeholder:'请输入'},
// {label:'省',name:'adress1',type:'select',placeholder:'请选择',options:[{id:'0',value:'所有'},{id:'1',value:'四川'},{id:'2',value:'陕西'}],link:'1'},
// {label:'市',name:'adress2',type:'select',placeholder:'请选择',options:[{id:'0',value:'所有'},{id:'1',value:'成都'},{id:'2',value:'泸州'}],link:'2'},
// {label:'创建日期',name:'timeFrom',type:'datatime',placeholder:'请选择日期',},
// {label:'到',name:'timeTo',type:'datatime',placeholder:'请选择日期',},
// {label:'a3',name:'name',type:'input',placeholder:'请输入',},
// {label:'a2',name:'select1',type:'select',placeholder:'请选择',options:[{id:'0',value:'所有'},{id:'1',value:'a'},{id:'2',value:'b'}],link:'2'},
// {label:'查询',name:'btn',type:'btn',},
// ],
// formDatas:{
// oid:'12315',
// adress1:'1',
// adress2:'',
// timeFrom:null,
// timeTo:null,
// name:'',
// select1:''
// }